<template>
  <div class="user-page">
    <div class="user-info">
      <van-image lazy-load :src="user.avatar || 'user.png'" round width="60px" height="60px" />
      <div class="profile" v-if="isFundLogin || isLogin">
        <h3>{{user.nickName}}</h3>
        <p>{{user.mobile}}</p>
      </div>
      <div class="profile" v-else>
        <h3>请登录</h3>
        <p>登录交易查看产品</p>
      </div>
    </div>
    <van-tabs sticky swipeable v-model="active" @rendered="onRendered" line-width="20px" line-height="4px">
      <van-tab title="关注投顾" name="adviser">
        <ul class="adviser-list" v-if="adviserList.length">
          <li
            class="adviser-item van-hairline--bottom tap-active"
            v-for="(item, i) in adviserList"
            :key="item.tgInfo.id"
            :class="{ 'van-hairline--top' : i === 1}"
            @click="$router.push(`/adviser/detail/${item.tgInfo.id}/`)"
          >
            <van-image lazy-load
              :src="item.tgInfo.avatar"
              width="72px"
              height="72px"
              class="avatar"
            />
            <div class="adviser-info">
              <div class="van-ellipsis">
                <h4>{{item.tgInfo.name}}</h4>
                <div class="follow">
                  <i class="icon icon-follow"></i>
                  <span>{{item.followCount}}</span>
                </div>
              </div>
              <p class="van-multi-ellipsis--l2">{{item.tgInfo.profile}}</p>
            </div>
          </li>
        </ul>
        <van-empty v-else-if="!loading" description="暂无数据">
          <van-button block round type="danger" @click="toLogin()" v-if="!isLogin">
            去登录
          </van-button>
        </van-empty>
      </van-tab>
    </van-tabs>
    <div class="text-center">
      <van-loading v-show="loading" type="spinner" size="16px">加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import { Cell, CellGroup, Button, Tabs, Tab, Loading, Tag, Empty } from 'vant';
import { mapState, mapActions, mapGetters } from 'vuex';
import { getUser } from '../api/user';
import { getUserTgList } from '../api/adviser';
import sortBy from 'lodash/sortBy';
import dayjs from 'dayjs';

export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Loading.name]: Loading,
    [Tag.name]: Tag,
    [Empty.name]: Empty
  },

  props: {
    tab: {
      type: String,
      default: 'adviser'
    }
  },

  data() {
    return {
      loading: false,
      active: this.tab,
      orderList: [],
      adviserList: [],
      subscriptionList: [],
    }
  },

  mounted() {
    this.$setTitle('我的主页');
    console.log('isLogin: ', this.isLogin);
    console.log('isFundLogin', this.isFundLogin);
    if (this.isFundLogin  || this.isLogin) {
       this.$store.dispatch('getUserInfo');
    }
  },

  computed: {
    ...mapState(['user']),
    ...mapGetters(['isLogin', 'isFundLogin'])
  },

  methods: {
    ...mapActions(['login', 'fundLogin']),

    async getUserTgList() {
      try {
        this.loading = true;
        const data = await getUserTgList({
          size: 999
        });
        this.adviserList = data.list;
      } catch (error) {
        console.error(error);
      } finally {
        this.loading = false;
      }
    },

    onRendered(name, title) {
      if(name === 'adviser') {
        this.isLogin && this.getUserTgList();
      }
    },

    async toLogin() {
      if(!this.isLogin) {
        await this.login();
      }
      if(!this.isFundLogin) {
        await this.fundLogin();
      }
    },
  }
};
</script>

<style lang="less">
.van-empty__bottom {
  width: 80%;
}

.van-tag {
  white-space: nowrap;
}

.user-page {
  .user-info {
    display: flex;
    align-items: center;
    padding: 20px 15px;
    margin-bottom: 10px;
    background: #fff;

    .profile {
      margin-left: 15px;
      line-height: 1.5;
    }
  }

  .adviser-list {
    background: #fff;

    .adviser-item {
      display: flex;
      align-items: center;
      padding: 15px;

      h4 {
        display: inline-block;
        font-size: 18px;
        margin-bottom: 5px;
      }

      .adviser-info {
        width: 100%;

        p {
          color: #5e616b;
          font-size: 14px;
        }
      }

      .follow {
        color: #bfbfbf;
        font-size: 13px;
        float: right;

        * {
          vertical-align: middle;
        }
      }

      .avatar {
        height: 72px;
        min-width: 72px;
        background: #ccc;
        margin-right: 15px;
        display: inline-block;
        border-radius: 4px;

        img {
          border-radius: 4px;
        }
      }
    }
  }

  .order-list {
    background-color: #fff;
    color: #9d9ea7;
    font-size: 14px;
    .order-item {
      padding: 15px 0;
      line-height: 1.5;

      .wrapper {
        margin: 0 12px;
      }

      h3 {
        margin-left: 12px;
        color: #2b313d;
      }
      .header {
        margin-bottom: 12px;
      }
      .header, .footer {
        display: flex;
        align-items: center;

        span:not(.van-tag) {
          flex: 1;
          text-align: right;
          white-space: nowrap;
        }
      }
    }
  }

  .subscribe-list {
    background-color: #fff;
    color: #9d9ea7;
    font-size: 14px;
    .subscribe-item {
      padding: 15px 0;
      line-height: 1.5;

      .wrapper {
        margin: 0 12px;
      }

      h3 {
        margin-left: 12px;
        color: #2b313d;
      }
      .header {
        margin-bottom: 12px;
      }
      .header, .footer {
        display: flex;
        align-items: center;

        span:not(.van-tag) {
          flex: 1;
          text-align: right;
        }
      }
    }
  }
}
</style>
